<template>
    <h2>显示物入库管理</h2>
    <p>
        货物名称：
        <el-input v-model="info.sMCargoName" style="width: 240px" placeholder="货物名称" />
        材质：
        <el-select v-model="info.sMMateriaLquality" clearable placeholder="Select" style="width: 240px">
            <el-option :value="0" label="请选择" />
            <el-option v-for="item in MateriaLquality" :key="item.mmteriaLqualityID" :label="item.materiaLqualityName"
                :value="item.mmteriaLqualityID" />
        </el-select>
        产地——国家：
        <el-select v-model="info.sMNationID" clearable placeholder="Select" style="width: 240px"
            @change="Provincelist()">
            <el-option :value="0" label="请选择" />
            <el-option v-for="item in Nation" :key="item.nationID" :label="item.nationName" :value="item.nationID" />
        </el-select>
        产地——省：
        <el-select v-model="info.sMProvinceID" clearable placeholder="Select" style="width: 240px">
            <el-option :value="0" label="请选择" />
            <el-option v-for="item in Provincel" :key="item.provinceID" :label="item.provinceName"
                :value="item.provinceID" />
        </el-select>
        支付方式：
        <el-select v-model="info.patternOfPayment" clearable placeholder="请选择" style="width: 240px">

        </el-select>
        登记人：
        <el-input v-model="info.createName" style="width: 240px" placeholder="登记人" />

        <el-button type="primary" @click="StockManagementList()">查询</el-button>
        <el-button @click="chengzhi()">重置</el-button>
    </p>
    <P>
        <el-button type="primary" @click="router.push('/AddDePutInStorage')">新增</el-button>&nbsp;&nbsp;
        <el-button type="primary" @click="plspDate()">删除</el-button>
        <el-button type="primary" @click="Getxls()">导出 </el-button>
    </P>
    <el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="sMCargoName" label="货物名称" />
        <el-table-column prop="sPTypeID" label="类型">
            <template v-slot="script">
                {{ script.row.typeName }}
            </template>
        </el-table-column>
        <el-table-column prop="sPMateriaLquality" label="材质">
            <template v-slot="script">
                {{ script.row.materiaLqualityName }}
            </template>
        </el-table-column>
        <el-table-column prop="sMGaugeLattice" label="规格" />
        <el-table-column prop="date" label="产地">
            <template v-slot="script">
                {{ script.row.nationName }}-{{ script.row.provinceName }}
            </template>
        </el-table-column>
        <el-table-column prop="sMQuantity" label="数量" />
        <el-table-column prop="sMSingleValence" label="单价" />
        <el-table-column prop="patternOfPayment" label="支付方式" />
        <el-table-column prop="sPExpectedDeliveryDate" label="采购金额">
            <template v-slot="script">
                <span>{{ (script.row.sMQuantity * script.row.sMSingleValence) }}</span>
            </template>
        </el-table-column>
        <el-table-column prop="createName" label="登记人" />
        <el-table-column prop="sPReserveNote" label="备注" />
        <el-table-column prop="createDate" label="创建时间">
            <template v-slot="script">
                {{ script.row.createDate.substring(0, 10) }}
            </template>
        </el-table-column>

        <el-table-column prop="name" label="操作" width="200">
            <template v-slot="script">
                <el-button type="primary" @click="router.push('/UpdDePutInStorage?id=' + script.row.sMCargoID)"
                    style="width: 20px;">编辑</el-button>&nbsp;
                <el-button type="primary" @click="spDate(script.row.sMCargoID)"
                    style="width: 20px;">删除</el-button>&nbsp;
                <el-button type="primary" @click="router.push('/DePutInStorageInfo?id=' + script.row.sMCargoID)"
                    style="width: 20px;">查看</el-button>&nbsp;
            </template>
        </el-table-column>
    </el-table>
    <table>
        <thead></thead>
        <tbody>
            <tr>
                <td>
                    <el-pagination v-model:current-page="page.pageiden" v-model:page-size="page.pageSzen"
                        :page-sizes="[3, 10, 20, 30, 40]" :background="true" layout="total,slot, sizes"
                        :total="page.totaCount" prev-text="上一页" next-text="下一页">
                        <template v-slot="script">
                            ,每页显示{{ page.pageSzen }},共{{ page.pageiden }}/{{ page.pageCount }}页
                        </template>
                    </el-pagination>
                </td>
                <td>
                    <el-pagination v-model:current-page="page.pageiden" v-model:page-size="page.pageSzen"
                        :page-sizes="[3, 10, 20, 30, 40]" :background="true" layout="slot, prev, pager, next"
                        :total="page.totaCount" prev-text="上一页" next-text="下一页">
                        <template v-slot="script">
                            <button :disabled="page.pageiden == 1" @click="page.pageiden = 1">首页</button>
                        </template>
                    </el-pagination>
                </td>
                <td>
                    <el-pagination v-model:current-page="page.pageiden" v-model:page-size="page.pageSzen"
                        :page-sizes="[3, 10, 20, 30, 40]" :background="true" layout="slot,jumper"
                        :total="page.totaCount" prev-text="上一页" next-text="下一页">
                        <template v-slot="script">
                            <button :disabled="page.pageiden == page.pageCount"
                                @click="page.pageiden = page.pageCount">尾页</button>
                        </template>
                    </el-pagination>
                </td>
            </tr>
        </tbody>
    </table>
</template>
<script setup lang='ts'>
import { reactive, ref, onMounted, watch } from 'vue'
import axios from 'axios';
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'
const router = useRouter()

//显示列表
const tableData = ref([])
//多选
const multipleSelection = ref([])
const handleSelectionChange = (val: any) => {
    multipleSelection.value = val
}
//生命函数钩
onMounted(() => {
    //入库管理显示
    StockManagementList();
    //显示材 质
    MateriaLqualitylist();
    //显示产 地：国家
    Nationlist();
})
//条件
const info = reactive({
    sMCargoName: "",//货物名称
    sMMateriaLquality: 0,//材 质
    sMNationID: 0,//产 地：国家
    sMProvinceID: 0,//产 地：省
    createName: "",//创建人
    patternOfPayment: ""//支付方式
})
//条件重置
const chengzhi = () => {
    info.sMCargoName = "";//货物名称
    info.sMMateriaLquality = 0;//材 质
    info.sMNationID = 0;//产 地：国家
    info.sMProvinceID = 0;//产 地：省
    info.patternOfPayment = "";//支付方式
    info.createName = "";//创建人
    page.pageiden = 1;//页码
    page.pageSzen = 3;//页容量
    StockManagementList()
}
//分页
const page = reactive({
    pageiden: 1,//页码
    pageSzen: 3,//页容量
    totaCount: 0,//总数据
    pageCount: 0//总页码
})
//执行分页
watch(page, () => {
    StockManagementList()
})
//显示材 质
const MateriaLquality = ref([])
const MateriaLqualitylist = () => {
    axios.get("MaterialRead/api/Public/MateriaLqualitylist").then(res => {
        MateriaLquality.value = res.data.data;
    }).catch(err => {
        console.log(err)
    })
}
//显示产 地：国家
const Nation = ref([])
const Nationlist = () => {
    axios.get("MaterialRead/api/Public/Nationlist").then(res => {
        Nation.value = res.data.data;
    }).catch(err => {
        console.log(err)
    })
}
//显示产 地：省
const Provincel = ref([])
const Provincelist = () => {
    axios.get("MaterialRead/api/Public/Provincelist?nationID=" + info.sPNationID).then(res => {
        Provincel.value = res.data.data;
    }).catch(err => {
        console.log(err)
    })
}

//入库管理显示
const StockManagementList = () => {
    axios.get("MaterialRead/api/StockManagement/StockManagementList", {
        params: {
            pageiden: page.pageiden,
            pageSzen: page.pageSzen,
            sMCargoName: info.sMCargoName,
            sMMateriaLquality: info.sMMateriaLquality,
            sMNationID: info.sMNationID,
            sMProvinceID: info.sMProvinceID,
            createName: info.createName,
            patternOfPayment: info.patternOfPayment,
        }
    }).then(res => {
        page.totaCount = res.data.data.totaCount;
        page.pageCount = res.data.data.pageCount;
        tableData.value = res.data.data.values;
    }).catch(err => {
        console.log(err)
    })
}

//批量删除 
const plspDate = () => {
    ElMessageBox.confirm(
        '确认删除吗？',
        'Warning',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            if (multipleSelection.value.length < 1) {
                ElMessage.success("至少选择一项")
                return
            }
            let ids: any[] = []
            ids = multipleSelection.value.map(ele => ele.sMCargoID)
            axios.post("materialwrite/api/StockManagement/DelStockManagement", { ids }).then(res => {
                ElMessage.success("删除成功")
                StockManagementList()
            }).catch(err => {
                ElMessage.success("删除失败")
            })
        })
        .catch(() => {

        })
}
//删除 
const spDate = (sMCargoID: number) => {
    ElMessageBox.confirm(
        '确认删除吗？',
        'Warning',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            let ids = [sMCargoID]
            axios.post("materialwrite/api/StockManagement/DelStockManagement", { ids }).then(res => {
                ElMessage.success("删除成功")
                StockManagementList()
            }).catch(err => {
                ElMessage.success("删除失败")
            })
        })
        .catch(() => {

        })
}

//导出
const Getxls = () => {
    let url = `MaterialRead/api/StockManagement/StockManagementXlsx?pageiden=${page.pageiden}&pageSzen=${page.pageSzen}
    &sMCargoName=${info.sMCargoName}&sMMateriaLquality=${info.sMMateriaLquality}&sMNationID=${info.sMNationID}&sMProvinceID=${info.sMProvinceID}
   &createName=${info.createName}&patternOfPayment=${info.patternOfPayment}`
    window.location.href = url
}

</script>

<style></style>